
Page({

  /**
   * 页面的初始数据
   */
  data: {
    url: null,
    url1: [],
    width: '100%',
    height: '400px',
    cWidth: '600px',
    cHeight: '600px'

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  /* 图片 */
  getimg: function () {
    var that = this
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: res => {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        // wx.compressImage({
        //   src: tempFilePaths[0], // 图片路径
        //   quality: 100, // 压缩质量
        //   success: res1 => {
        //     const compressImgPath = res1.tempFilePath
        //     this.setData({
        //       url: compressImgPath
        //     })

        //   }
        // })
        const time3 = new Date().getTime()
        compressOrRotate(tempFilePaths).then(res=>{
          console.log(res,'---------')
          this.setData({
            url1:res
          })
          console.log(this)
          const time4 = new Date().getTime()
          console.log(time4-time3)
        }).catch(err=>{
          console.log(err)
        }) 

        function compressOrRotate(tempFilePaths) {
          return new Promise((resolve,reject)=>{
            operateImg(tempFilePaths)
            function operateImg(filePaths,i=0,resultFilePaths=[]) {
              //i用于判断图片是否处理完，i=filePaths.length时，代表处理完成，否则回调继续处理
              wx.getImageInfo({
                src: filePaths[i],
                success: resp => {
                  const imgHeight = resp.height
                  const imgWdith = resp.width
                  const imgPath = resp.path
                  const time1 = new Date().getTime()
                  // if (imgHeight > imgWdith) {
                    
                  // }
                  rotateImg(imgPath, imgHeight, imgWdith)
                  function rotateImg(path, iHeight, iWidth) {
                    const query = wx.createSelectorQuery()
                    query.select('#myCanvas')
                      .fields({ node: true, size: true })
                      .exec((res) => {
                        const canvas = res[0].node
                        const ctx = canvas.getContext('2d')
      
                        //dpr是画高清图需要
                        let dpr = wx.getSystemInfoSync().pixelRatio
                        //安卓手机的dpr有些是3,当dpr=3时，下方设置的画布宽高过大会出现缓冲区超过限制大小的问题
                        //所以限制dpr解决上述问题
                        if (dpr > 2) {
                          dpr = 2
                        }
                        
                        //设置画布宽高为canvas元素宽高的dpr倍，这样canvas呈现的图片就比较高清，不会模糊
                        canvas.width = res[0].width * dpr
                        canvas.height = res[0].height * dpr
                        //在旋转操作绘图上下文之前先保存初始状态，缩放和旋转等操作会叠加，所以每一次绘图后需要回复到原始状态。
                        //使用ctx.restore()恢复
                        ctx.save()
                        //按设备像素比缩放，（因上面将画布宽高都扩大了dpr倍，此时画布和canvas元素的宽高比都为dpr:1）
                        //例如：dpr=2时，画布画一个长100宽200的矩形，canvas元素呈现出的是长50，宽100的矩形。当scale(2，2)后，画布横纵坐标都扩大2倍，
                        //此时坐标上的（100，200）其实就相当于画布上的（200，400），换算到canvas元素就是（100，200）。
                        ctx.scale(dpr, dpr)
                        //微信小程序新API Canvas 2D 接口同web canvas一样，drawImage时需要 Image 对象，而不是旧接口的地址
                        //固需要使用createImage()方法新建一个img对象，且画图需要在onload回调中操作。如果同时画多个图，就建立多个img
                        const imgObj = canvas.createImage()
                        imgObj.src = path
                        imgObj.onload = () => {
                          let toCanvasHeight = null
                          //先清空画布再画图，（主要是清空上一次的图片）
                          ctx.clearRect(0, 0, res[0].width, res[0].height)

                          //如果图片宽小于高，就需要旋转
                          if(iWidth<iHeight) {
                            toCanvasHeight = Math.floor(iWidth / iHeight * res[0].height)
                            //先移动圆点再旋转90度
                            ctx.translate(res[0].width, 0)
                            ctx.rotate(90 * Math.PI / 180)
                            ctx.drawImage(imgObj, 0, 0, iWidth, iHeight, 0, 0, toCanvasHeight, res[0].width)
                          }else {
                            toCanvasHeight = Math.floor(iHeight/iWidth * res[0].width)
                            ctx.drawImage(imgObj, 0, 0, iWidth, iHeight, 0, 0, res[0].width, toCanvasHeight)
                          }
                          
                          setTimeout(() => {
                            let desW = iHeight
                            let desH = iWidth
                            //压缩图片大小
                            
                            if (iWidth > 600||iHeight>600) {
                              desW = 600
                              if(iWidth<iHeight) {
                                desH = Math.round((iWidth / iHeight) * 600)
                              }else {
                                desH = Math.round((iHeight/iWidth) * 600)
                              }
                              
                            }

                            wx.canvasToTempFilePath({
                              x: 0,
                              y: 0,
                              width: res[0].width,
                              height: toCanvasHeight,
                              destWidth: desW*dpr,
                              destHeight: desH*dpr,
                              canvas: canvas,
                              fileType:'jpg',
                              quality:0.8,
                              success(res) {
                                // console.log(res.tempFilePath)
                                const time2 = new Date().getTime()
                                console.log(time2 - time1)
                                resultFilePaths.push(res.tempFilePath)
                                // 恢复原始绘图上下文
                                ctx.restore()
                                // wx.getImageInfo({
                                //   src: res.tempFilePath,
                                //   success(res) {
                                //     console.log(res)
                                //     console.log(res.height)
                                //   }
                                // })
                                if(i>=filePaths.length-1) {
                                  // console.log(resultFilePaths)
                                  resolve(resultFilePaths)
                                }else {
                                  operateImg(filePaths,i+1,resultFilePaths)
                                }
                              },
                              fail: err => {
                                console.log(err)
                                // 失败也要恢复原始绘图上下文
                                ctx.restore()
                              }
                            })
                          }, 100)
                        }
                      })
                  }
                }
              })
            }
          })
        }

       
      }
    })
  },

  /* 预览图片 */
  preview: function () {
    const aa = []
    aa.push(this.data.url)
    wx.previewImage({
      current: this.data.url, // 当前显示图片的http链接
      urls: aa // 需要预览的图片http链接列表
    })
  },
  /* 预览图片 */
  preview1: function (e) {
    const current = e.currentTarget.dataset.url
    wx.previewImage({
      current: current, // 当前显示图片的http链接
      urls: this.data.url1 // 需要预览的图片http链接列表
    })
  }
})